import React, { useState } from 'react'
import { Button } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import styles from './index.less'

import Text from './text'
import TextNav from './textNav'
import GroupBuy from './groupBuy'
import FightGroup from './fightGroup'


export default () => {

    const [comList, setComList] = useState<any[]>([])
    const [activeInx, setActiveInx] = useState(0)

    const setComListExtend = (result: any[]) => {
        setComList(result)
        setActiveInx(result.length - 1)
    }
    // a little function to help us with reordering the result
    const reorder = (list: any, startIndex: any, endIndex: any) => {
        const result = Array.from(list);
        const [removed] = result.splice(startIndex, 1);
        result.splice(endIndex, 0, removed);
        return result;
    };

    const getItemStyle = (isDragging: boolean, draggableStyle: any, inx: number) => ({
        // some basic styles to make the items look a bit nicer
        userSelect: "none",

        padding: "2px",
        // margin: `0 0 ${grid}px 0`,

        // change background colour if dragging
        background: (isDragging && activeInx !== inx) ? "lightgreen" : "transparent",

        // styles we need to apply on draggables
        ...draggableStyle
    });

    const onDragEnd = (result: any) => {
        if (!result.destination) {
            return;
        }
        if (result.destination.index === result.source.index) {
            return;
        }
        const items = reorder(
            comList,
            result.source.index,
            result.destination.index
        );
        if (result.source.index === activeInx) { //移动选中的
            setActiveInx(result.destination.index)
        }
        if (result.source.index > activeInx && activeInx >= result.destination.index) {
            setActiveInx(activeInx + 1)
        }
        if (result.source.index < activeInx && activeInx <= result.destination.index) {
            setActiveInx(activeInx - 1)
        }
        setComList(items)
    }

    let divStyle: any = { borderBottom: "1px solid #E5E5E5", backgroundColor: "#D3D3D3" }
    comList.length > 0 && (divStyle.padding = "2px")
    return (
        <PageHeaderWrapper title={false}>
            <DragDropContext onDragEnd={onDragEnd}>
                <div style={{ width: "320px", backgroundColor: "white", border: "1px solid #E5E5E5", marginLeft: "20px" }}>
                    <img
                        src="http://uniapp.b2b2c.niuteam.cn/public/static/ext/diyview/img/preview_head.png"
                        alt="" style={{ width: "100%" }}
                    />
                    <Droppable droppableId="droppable">
                        {(provided: any, snapshot: any) => (
                            <div
                                style={divStyle}
                                {...provided.droppableProps}
                                ref={provided.innerRef}
                            >
                                {
                                    comList.map((Component: any, inx: number) => {
                                        return (
                                            <Draggable draggableId={"drag" + inx} index={inx} key={inx}>
                                                {(provided: any, snapshot: any) => (
                                                    <div
                                                        ref={provided.innerRef}
                                                        {...provided.draggableProps}
                                                        {...provided.dragHandleProps}

                                                        style={getItemStyle(
                                                            snapshot.isDragging,
                                                            provided.draggableProps.style,
                                                            inx
                                                        )}
                                                    >
                                                        <Component inx={inx} activeInx={activeInx} onDivClick={(inx: number) => {
                                                            setActiveInx(inx)
                                                        }} removeCom={(inx: number) => {
                                                            const result = [...comList]
                                                            result.splice(inx, 1)
                                                            setComList(result)
                                                            if (inx < activeInx) {
                                                                setActiveInx(activeInx - 1)
                                                            }
                                                        }} />
                                                    </div>
                                                )}
                                            </Draggable>
                                        )
                                    })
                                }
                                {provided.placeholder}
                            </div>
                        )}
                    </Droppable>

                    <div className={styles.componentDiv}>
                        <nav>其他组件</nav>
                        <ul>
                            <li className={styles.frontLi} onClick={() => {
                                let result = [...comList]
                                result.push(GroupBuy)
                                setComListExtend(result)
                                // setComList(result)
                            }}>团购</li>
                            <li onClick={() => {
                                let result = [...comList]
                                result.push(FightGroup)
                                setComListExtend(result)
                            }}>拼团</li>
                            <li>分销</li>
                            <li>秒杀</li>
                        </ul>
                    </div>

                    <div className={styles.componentDiv}>
                        <nav>系统组件</nav>
                        <ul>
                            <li className={styles.frontLi} onClick={() => {
                                let result = [...comList]
                                result.push(Text)
                                setComListExtend(result)
                                // setComList(result)
                            }}>文本</li>
                            <li onClick={() => {
                                let result = [...comList]
                                result.push(TextNav)
                                setComListExtend(result)
                                // setComList(result)
                            }}>文本导航</li>
                            <li>公告</li>
                            <li>图文导航</li>
                            <li className={styles.frontLi}>图文广告</li>
                        </ul>
                    </div>

                    <div style={{ textAlign: "center", padding: "15px" }}>
                        <Button type="primary">保存</Button>
                    </div>
                </div>
            </DragDropContext>
        </PageHeaderWrapper >
    );
}